<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="../static/css/font.css">
        <link rel="stylesheet" href="../static/css/xadmin.css">
        <script src="../static/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="../static/js/xadmin.js"></script>
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>导航元素</cite></a>
          </span>
          <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <form class="layui-form layui-col-space5">
                                <div class="layui-inline layui-show-xs-block">
                                    <input class="layui-input"  autocomplete="off" placeholder="开始日" name="start" id="start">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <input class="layui-input"  autocomplete="off" placeholder="截止日" name="end" id="end">
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <select id="modules" name="modules" lay-verify="required" lay-search=""></select>
                                    </div>
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                                </div>
                            </form>
                        </div>
                        <script type="text/html" id="toolbarDemo">
                            <div>
                                <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
                                <button class="layui-btn" onclick="xadmin.open('添加用户','./admin-add.jsp',600,400)"><i class="layui-icon"></i>添加</button>
                            </div>
                        </script>
                        <div class="layui-card-body ">
                            <table class="layui-hide" id="userListTable" lay-filter="test" lay-data="{id:'uIds'}"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="detail">编辑</a>
        <a class="layui-btn-xs layui-icon layui-icon-delete" style="font-size: 30px;" lay-event="del"></a>
    </script>
    <script type="text/javascript">
        //一般直接写在一个js文件中
        layui.use('table', function(){
            var table = layui.table;


            table.render({
                elem: '#userListTable'
                ,url:'/user/queryAdmins'
                ,page: true
                ,toolbar: '#toolbarDemo'
                ,cols: [[
                    {type:'checkbox'}
                    ,{field:'uId', width:80, title: 'ID'}
                    ,{field:'uName', width:100, title: '登录名'}
                    ,{field:'uTell', width:150, title: '手机'}
                    ,{field:'uMailbox', width:180, title: '邮箱'}
                    ,{field:'uRole', title: '角色', width: 150}
                    ,{field: 'uTime', width: 190, title: '加入时间'}
                    ,{title:'操作', toolbar: '#barDemo', width:150}
                ]]
            });

            //头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'getCheckData':
                        var data = checkStatus.data;
                        if(data.length > 0){
                            layer.alert(JSON.stringify(data));
                        }else {
                            layer.alert("您还未选择要查看的行！");
                        }
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：'+ data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选': '未全选');
                        break;
                };
            });
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                console.log("data：" + data);
                if (obj.event === 'detail') {
                    var id = obj.data.id;

                    xadmin.open('修改用户','/user/modUser?id='+data.uId,600,400);

                    table.reload();
                    // layer.msg('ID：' + data.purviewId + ' 的查看操作');
                } else if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        layer.close(index);
                        console.log("id：" + data.uId);
                        $.ajax("/user/delete", {
                            type:"GET",
                            data:{
                                id:data.uId

                            },
                            dataType:"json",
                            success:function (data, textStatus, jqXhr) {
                                if (data.code == 200) {
                                    layer.msg("删除成功！");
                                    obj.del();
                                    layer.close(index);
                                } else {
                                    layer.msg("删除失败！")
                                }
                            }
                        });
                    });

                } else if (obj.event === 'edit') {
                    layer.alert('编辑行：<br>' + JSON.stringify(data))
                } else if (obj.event === 'clickSubject') {
                    $.ajax("/MsgServlet", {
                        type:"GET",
                        data:{
                            operater:"readMsg",
                            id:data.id
                        },
                        dataType:"json",
                        success:function (data, textStatus, jqXhr) {
                            if (data === 1) {
                                // alert("11111");
                                document.location.href = "http://localhost:8082/admin/readMsg.jsp";
                            }
                        }
                    });
                }
            });

            var $ = layui.$, active = {
                getCheckData: function(){ //获取选中数据
                    var checkStatus = table.checkStatus('uIds')
                        ,data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                }
            };

            $('.layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

        });
    </script>

    <script>
      layui.use(['laydate','form'], function(){
        var laydate = layui.laydate;
        var form = layui.form;

        //执行一个laydate实例
        laydate.render({
          elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
          elem: '#end' //指定元素
        });
      });
    </script>
</html>